<template>
	<view class="bgIndex ">

		<view class="flex-end" style="color: #898888;padding: 20rpx 20rpx 0 0" @click="sortFn()">
			排序
			<uni-icons color="#898888" type="down" size="15"></uni-icons>
		</view>
		<!-- 	<sunui-navbar v-if="tabList.length>=1" :items="tabList" lineHeight="70rpx" :isCenter="false"
			:currentIndex="currentIndex" padding="12rpx" activeColor="#000000" :size="65" activeLineBg="#785DF6"
			textAlign="center" activeLineWidth="100%" activeDirection="space-between" activeLineHeight="6rpx"
			bgColor="transparent" :margin="10" @change="e=>getChange(e,tabList[e].id)"></sunui-navbar> -->
			<scroll-list ref="list"  @load="load" @refresh="refresh">
		<!-- <cc-pullScroolView class="pullScrollView" ref="pullScroll" :pullDown="pullDown"> -->
			<!-- 	<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption" :down="downOption"> -->
			<view v-for="(item,index) in list" class="" :key="index">

				<view class="flex-between padding20">
					<view class="flex-start-center" @click.stop="userInfoFn(item)">
						<image class="img" :src="item.avatar" mode=""></image>
						<view class="margin-left_10rpx " style="width: 500rpx;">
							<view class="flex-start-center" style="margin-bottom: 16rpx;">
								<image v-if="item.level_id!=1" class="memberVip" :src="memberVip" mode="widthFix">
								</image>
								<view class="font-weight " :style="{color:item.level_id==1?'#666666':'#EF4C78'}">

									{{item.nickname}}


								</view>

							</view>
							<view class="flex-start-center">
								<view class="sexImgDiv" flex v-if="item.sex==2">
									<image class="sexImg" :src="memberNv" mode="widthFix"></image>
									<text class="sexTitle"
										style="color: #fff;font-size: 22rpx;margin-top: 1rpx;">{{item.age}}</text>
								</view>
								<view class="sexImgDiv flex" v-if="item.sex==1">
									<image class="sexImg" :src="memberNan" mode="widthFix"></image>
									<text class="sexTitle " style="color: #fff;font-size: 22rpx;">{{item.age}}</text>
								</view>
								<text style="margin-right: 10rpx;color: #C0C0C0;">{{item.create_time}}</text>

							</view>
						</view>
					</view>
					<view v-if="useId!==item.uid"
						:class="item.is_follow==0?'followBtn flex font26':'NowFollowBtn flex font26'"
						@click="followUserFn(item.uid,item.is_follow)">
						{{item.is_follow==0? '关注':'已关注'}}
					</view>
				</view>
				<view class="evaluationsContent" @click="circleDetailsFn(item.id)">
					<view class="flex-start-center-wrap">
						<view class="evaluationsTitle">
							{{item.title}}
						</view>
						<view class="margin-bottom_20rpx" v-for="(items,i) in item.notice_user_list" :key="i">
							<text class="margin-left_10rpx" style="color: #7E5CFF;">@{{items.nickname}}</text>
						</view>
					</view>

					<view class="flex-start-center-wrap ">
						<block v-if="item.img.length==1">
							<view v-for="(imgs,i) in item.img" :key="i">
								<image class="achievementsImg" :src="imgs" @click.stop="imgScare(imgs,1)"
									mode="aspectFill"></image>
							</view>

						</block>
						<block v-else>
							<view v-for="(img,indexs) in item.img" :key="indexs">
								<image class="image" :src="img" @click.stop="imgScare(item.img,2,indexs)"
									mode="aspectFill">
								</image>
							</view>
						</block>
					</view>

					<!-- 		<view class="" v-if="dynamicInformation&&dynamicInformation.img">
						<view @click="imgScare(dynamicInformation.img[0])" class=""
							v-if="dynamicInformation.img.length==1">
							<image class="achievementsImg" :src="dynamicInformation.img[0]" mode="aspectFill">
							</image>
						</view>
						<view class="" v-if="dynamicInformation.img.length>1">
							<view class="flex-start-center-wrap ">
					
								<block v-for="(img,index) in dynamicInformation.img" :key="index">
									<view @click="imgScare(img)" class="">
										<image class="image" :src="img" mode="aspectFill">
										</image>
									</view>
								</block>
							</view>
						</view>
					</view> -->

					<view class="flex-between margin-top_30rpx">


						<view class="flex-start-center ">
							<view class="flex-start-center" style="margin-right: 13rpx; width: 110rpx;"
								@click.stop="circleLikesFn(item.id,item.is_like)">

								<uni-icons class="share" :color="item.is_like==1?'#FF3D53':'#999999'"
									:type="item.is_like==1?'heart-filled':'heart'" size="20"></uni-icons>
								<!-- <image class="share" :src="follow" mode=""></image> -->
								<text
									style="color: rgb(153, 153, 153);margin-left: 10rpx;vertical-align: sub;">{{item.like_number}}</text>
							</view>
							<!-- 评价列表 -->
							<view style="margin-top: 10rpx;" class="flex-start-center"
								@click.stop="circleDetailsFn(item.id)">
								<!-- <image class="share" :src="comment" mode=""></image> -->

								<uni-icons color="#999999" type="chat" size="20"></uni-icons>
								<text
									style="color: rgb(153, 153, 153);margin-left: 8rpx;vertical-align: sub;margin-bottom: 10rpx;">
									{{item.comment_number}}</text>
							</view>
						</view>
						<view class=" flex" style="color: #999999;" v-if="item.distance_kilometer">
							<image class="imgAddress" :src="path" mode=""></image>
							<text class="font-overflow" style="max-width: 150rpx;">{{item.address}}</text>
							<text class="padding_0_10rpx">|</text>
							<text>{{item.distance_kilometer}}km</text>
						</view>
					</view>
				</view>

			</view>
		<!-- </cc-pullScroolView> -->
		 </scroll-list>
		<!-- </mescroll-body> -->
		<!-- <view style="height: 120rpx;"></view> -->
		<!-- <tqb-tabbar activeIndex="1" /> -->
	</view>


</template>

<script>
	// import tqbTabbar from '../../components/tqb-tabbar/tqb-tabbar.vue'
	export default {
		props: ['sortXcx', 'show', 'reachBottomWechat'],
		components: {
			// tqbTabbar
		},
		data() {
			return {
				comment: this.$img.comment,
				camera: this.$img.camera,
				follow: this.$img.follow,
				path: this.$img.path,
				memberVip: this.$img.memberVip,
				memberNv: this.$img.memberNv,
				memberNan: this.$img.memberNan,


				userInfo: uni.getStorageSync("userInfo"),
				useId: uni.getStorageSync("userInfo").id,
				downOption: {
					auto: false
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				heightSystemss: 0,
				currentIndex: 1,
				pictureList: ['http://yunhunjian123.oss-cn-shanghai.aliyuncs.com/2024-06-08/fc702202406081504044654.png',
					'http://yunhunjian123.oss-cn-shanghai.aliyuncs.com/2024-06-08/7ab91202406081504112378.png',
					'http://yunhunjian123.oss-cn-shanghai.aliyuncs.com/2024-06-08/fc702202406081504044654.png',
					'http://yunhunjian123.oss-cn-shanghai.aliyuncs.com/2024-06-08/fc702202406081504044654.png'
				],
				tabList: [{
						name: '搭子',
						id: '1' //null
					}, {
						name: '圈子',
						id: '2' //null
					},

					{
						name: '服务',
						id: '3' //null
					},
					{
						name: '社交',
						id: '4' //null
					},
					{
						name: '关注',
						id: '5' //null
					},
					{
						name: '社群',
						id: '6' //null
					},

				],
				list: [],
				windowHeight: '',
				getUid: '',
				sort: '',

				// 列表总数量
				totalNum: 600,
				//  页码 默认1开始
				curPageNum: 1,
			}
		},
		onLoad(options) {

			this.createdgetSystemInfo()

			if (options) {
				this.getUid = options.uid
			}
          

		},
		created() {
			
			// this.templateTpo()
		},
		onShow() {
			
		},
		watch: {
			reachBottomWechat: function(value) {

				console.log('监听用户上拉加载1')
				// 数据全部加载完
				if (this.curPageNum * 10 >= this.totalNum) {
							
				} else {
							
					// 显示加载中
					// this.$refs.pullScroll.showUpLoading();
					// this.curPageNum++;
					// this.requestData();
				}

			},
			show: function(value) {

			this.$nextTick(() => {
			     this.$refs.list.refresh ();
			})

			},

			sortXcx: function(value) {
				this.sort = value
				this.$nextTick(() => {
				     this.$refs.list.refresh ();
				})

			}
		},
		methods: {
			// 加载数据
			load(paging) {
				setTimeout(async() => {
					
					
					
					
						const result = await this.$http.post({
							url: this.$api.circleList,
							data: {
								page: paging.page,
								limit: 10,
								oneself_uid: this.userInfo.id,
					
								circle_sort_rule: this.sort,
					
								dimension: this.userInfo.dimension ? this.userInfo.dimension : '',
								longitude: this.userInfo.longitude ? this.userInfo.longitude : ''
							},
							headers: {
								'Authorization': this.userInfo.token
							}
					
						})
					
					
						if (result.code == 0) {
							this.totalNum = result.data.count;
					
						if (paging.page == 1) this.list = [];
					
							result.data.list.forEach((item) => {
								if (item.img.includes(',')) {
									item.img = item.img.split(',').map((item) => item.trim());
								} else {
									if (item.img.length) {
										item.img = item.img.split().map((item) => item.trim());
										console.log(item)
									} else {
										item.img = []
									}
								}
					
							})
					
					
							this.list = this.list.concat(result.data.list);
				
						} else {
							this.$sun.toast(result.message, 'none')
						}
					
					
					
					
					
					console.log(this.totalNum,this.list)
							
					// 刷新成功  参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
					this.$refs.list.refreshSuccess({
						list: this.list,
						total: this.totalNum
					});
					// 刷新失败
					// this.$refs.list.refreshFail()
				}, 500);
			},
			// 刷新刷剧
			refresh(paging) {
				
				setTimeout(async() => {
					
					
					
					
						const result = await this.$http.post({
							url: this.$api.circleList,
							data: {
								page: paging.page,
								limit: 10,
								oneself_uid: this.userInfo.id,
					
								circle_sort_rule: this.sort,
					
								dimension: this.userInfo.dimension ? this.userInfo.dimension : '',
								longitude: this.userInfo.longitude ? this.userInfo.longitude : ''
							},
							headers: {
								'Authorization': this.userInfo.token
							}
					
						})
					
					
						if (result.code == 0) {
							this.totalNum = result.data.count;
					if (paging.page == 1) this.list = [];
						
							result.data.list.forEach((item) => {
								if (item.img.includes(',')) {
									item.img = item.img.split(',').map((item) => item.trim());
								} else {
									if (item.img.length) {
										item.img = item.img.split().map((item) => item.trim());
										console.log(item)
									} else {
										item.img = []
									}
								}
					
							})
					
					
							this.list = this.list.concat(result.data.list);
				
						} else {
							this.$sun.toast(result.message, 'none')
						}
					
					
					
					
					
					console.log(this.totalNum,this.list)
			
					// 刷新成功  参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
					this.$refs.list.refreshSuccess({
						list: this.list,
						total:this.totalNum
					});
					// 刷新失败
					// this.$refs.list.refreshFail()
				}, 500);
			},
			// 上拉加载
			onReachBottom() {
				console.log('监听用户上拉加载1')
				// 数据全部加载完
				if (this.curPageNum * 10 >= this.totalNum) {

				} else {

					// // 显示加载中
					// this.$refs.pullScroll.showUpLoading();
					// this.curPageNum++;
					// this.requestData();
				}

			},




			screenFn() {
				this.$emit('socialSortBol', true)
			},

			pageRefresh() {
				let myThis = this;
				this.$nextTick(() => {

					myThis.$refs.pullScroll.refresh();

				});
			},
			// 下拉刷新
			pullDown(pullScroll) {

				console.log('下拉刷新');
				this.list = [];
				this.curPageNum = 1;
				setTimeout(() => {
					this.requestData(pullScroll);
				}, 300);

			},


			async upCallback(scroll) {
				const result = await this.$http.post({
					url: this.$api.circleList,
					data: {
						page: this.curPageNum,
						limit: 10,
						oneself_uid: this.userInfo.id,

						circle_sort_rule: this.sort,

						dimension: this.userInfo.dimension ? this.userInfo.dimension : '',
						longitude: this.userInfo.longitude ? this.userInfo.longitude : ''
					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})


				if (result.code == 0) {
					this.totalNum = result.data.count;
					// this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];
					result.data.list.forEach((item) => {
						if (item.img.includes(',')) {
							item.img = item.img.split(',').map((item) => item.trim());
						} else {
							if (item.img.length) {
								item.img = item.img.split().map((item) => item.trim());
								console.log(item)
							} else {
								item.img = []
							}
						}

					})

					this.list = this.list.concat(result.data.list);
					// 如果是最后一页
					if (this.curPageNum * 10 >= this.totalNum) {
						this.$refs.pullScroll.finish();

					} else {
						// 不是最后一页
						this.$refs.pullScroll.success();
					}

				} else {
					this.$sun.toast(result.message, 'none')
				}


			},



			requestData() {



				setTimeout(async () => {


					const result = await this.$http.post({
						url: this.$api.circleList,
						data: {
							page: this.curPageNum,
							limit: 10,
							oneself_uid: this.userInfo.id,

							circle_sort_rule: this.sort,

							dimension: this.userInfo.dimension ? this.userInfo.dimension : '',
							longitude: this.userInfo.longitude ? this.userInfo.longitude : ''
						},
						headers: {
							'Authorization': this.userInfo.token
						}

					})

             
					if (result.code == 0) {
						this.totalNum = result.data.count;

						if (this.curPageNum == 1) this.list = [];
						
						result.data.list.forEach((item) => {
							if (item.img.includes(',')) {
								item.img = item.img.split(',').map((item) => item.trim());
							} else {
								if (item.img.length) {
									item.img = item.img.split().map((item) => item.trim());
									console.log(item)
								} else {
									item.img = []
								}
							}

						})
						
						
							this.list = this.list.concat(result.data.list);
						
						// 如果是最后一页
						if (this.curPageNum * 10 >= this.totalNum) {
							this.$refs.pullScroll.finish();

						} else {
							// 不是最后一页
							this.$refs.pullScroll.success();
						}
					} else {
						this.$sun.toast(result.message, 'none')
					}






				}, 100);

			},
			userInfoFn(item) {
				if (uni.getStorageSync('userInfo').token) {
					this.$sun.navGo('/pagesB/index/socialDetails', {
						uid: item.uid
					})
				} else {
					this.$sun.navRe('/pages/Login/setUpChildLogin')
				}

			},


			async followUserFn(uid, follow) {
				if (this.userInfo.disable == 0) {
					this.$sun.toast('该用户已被拉黑', 'none')
				} else {
					if (follow == 0) {
						this.templateTpo()
						const result = await this.$http.post({
							url: this.$api.followUser,
							data: {
								follow: follow == 0 ? 1 : 0,
								uid: uid

							},
							headers: {
								'Authorization': this.userInfo.token
							}

						})
						if (result.code == 0) {

							setTimeout(() => {
								// this.$sun.toast(result.message, 'none')
							}, 500)
							const updatedData = this.list.map(item =>
							  item.uid == uid? {...item, is_follow: item.is_follow==0?1:0} : item
							);
							this.list=updatedData


						} else {
							this.$nextTick(() => {
								this.$refs.list.refresh ();
							})
							this.$sun.toast(result.message, 'none')
						}
					} else {

						const result = await this.$http.post({
							url: this.$api.followUser,
							data: {
								follow: follow == 0 ? 1 : 0,
								uid: uid

							},
							headers: {
								'Authorization': this.userInfo.token
							}

						})
						if (result.code == 0) {

							setTimeout(() => {
								this.$sun.toast(result.message, 'none')
							}, 500)
							this.$nextTick(() => {
								this.$refs.list.refresh ();
							})


						} else {
							this.$nextTick(() => {
								this.$refs.list.refresh ();
							})
							this.$sun.toast(result.message, 'none')
						}

					}
				}

			},
			// 订阅消息

			async templateTpo() {
				wx.requestSubscribeMessage({
					tmplIds: JSON.parse(JSON.stringify(uni.getStorageSync("messageListTemplate"))),
					success: res => { //成功、
						if (res[Object.keys(res)[0]] == "accept") {
							console.log("成功订阅")
							// this.$sun.toast("成功订阅")
						} else {
							this.$sun.toast(
								"点击右上角的「...」按钮，找到「订阅消息」相关选项，并设定为「接收」状态方可再次订阅")

							uni.showModal({
								title: "温馨提示",
								content: "点击右上角的「...」按钮，找到「订阅消息」相关选项，并设定为「接收」状态方可再次订阅"
							})
						}
					},
					fail: err => { //失败
						console.log(err)
						this.$sun.toast("订阅消息配置失败");
					}
				})



				// wx.getSetting({
				// 	success(res) {
				// 		console.log(res)
				// 		if (res.subscriptionsSetting) {
				// 			// 用户有pushSubscription对象
				// 			const pushSubscription = res.subscriptionsSetting['message.subscribe.send']
				// 			if (pushSubscription) {
				// 				// 用户已订阅
				// 				console.log('用户已订阅')
				// 				this.$sun.toast("用户已订阅")
				// 			} else {
				// 				wx.requestSubscribeMessage({
				// 					tmplIds: ['Y04lXw-tkuSAdFi77o5BPCJij1Z9fq7e4ZbIYidgm20'],
				// 					success: res => { //成功、
				// 						if (res[Object.keys(res)[0]] == "accept") {
				// 							console.log("成功订阅")
				// 							this.$sun.toast("成功订阅")
				// 						} else {
				// 							this.$sun.toast(
				// 								"点击右上角的「...」按钮，找到「订阅消息」相关选项，并设定为「接收」状态方可再次订阅")

				// 							uni.showModal({
				// 								title: "温馨提示",
				// 								content: "点击右上角的「...」按钮，找到「订阅消息」相关选项，并设定为「接收」状态方可再次订阅"
				// 							})
				// 						}
				// 					},
				// 					fail: err => { //失败
				// 						console.log("订阅消息配置失败")
				// 						this.$sun.toast("订阅消息配置失败");
				// 					}
				// 				})

				// 			}
				// 		} else {
				// 			this.$sun.toast("无法获取订阅状态")
				// 			// 用户没有pushSubscription对象，可能是微信版本过低或者用户未允许小程序获取该权限
				// 			console.log('无法获取订阅状态')
				// 		}
				// 	},
				// 	fail() {
				// 		// 获取设置失败的处理逻辑
				// 	}
				// })





			},
			async circleLikesFn(id, like) {
				if (uni.getStorageSync('userInfo').token) {
					const result = await this.$http.post({
						url: this.$api.circleLike,
						data: {
							is_like: like == 0 ? 1 : 0,
							id: id,

						},
						headers: {
							'Authorization': this.userInfo.token
						}

					})
					if (result.code == 0) {

						setTimeout(() => {
							this.$sun.toast(result.message, 'none')
						}, 500)
						const updatedData = this.list.map(item =>
						  item.id == id? {...item, is_like: item.is_like==0?1:0,like_number:item.is_like==0?item.like_number+1:item.like_number-1} : item
						);
						this.list=updatedData


					} else {

						this.$sun.toast(result.message, 'none')
					}
				} else {
					this.$sun.navRe('/pages/Login/setUpChildLogin')
				}

			},
			circleDetailsFn(id) {
				if (uni.getStorageSync('userInfo').token) {
					this.$sun.navGo('/pagesB/index/reviewDetails', {
						uid: id
					})
				} else {
					this.$sun.navRe('/pages/Login/setUpChildLogin')
				}


			},

			getChange(index, e) {


				this.currentIndex = index

			},


			sortFn() {
				if (uni.getStorageSync('userInfo').token) {
					this.$emit('circleSortBol', true)
				} else {
					this.$sun.navRe('/pages/Login/setUpChildLogin')
				}

			},
			imgScare(img, len, index) {
				console.log(img)

				if (len == 1) {
					uni.previewImage({
						urls: [img],
						longPressActions: {
							itemList: ['发送给朋友', '保存图片', '收藏'],
							success: function(data) {

							},
							fail: function(err) {

							}
						}
					});
				} else {
					uni.previewImage({
						urls: img,
						current: index,
						longPressActions: {
							itemList: ['发送给朋友', '保存图片', '收藏'],
							success: function(data) {

							},
							fail: function(err) {

							}
						}
					});
				}


			},
			// imgScare(img) {

			// 	uni.previewImage({
			// 		urls: [img],
			// 		longPressActions: {
			// 			itemList: ['发送给朋友', '保存图片', '收藏'],
			// 			success: function(data) {

			// 			},
			// 			fail: function(err) {

			// 			}
			// 		}
			// 	});


			// },
			createdgetSystemInfo() {
				let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
				uni.getSystemInfo({
					//获取系统信息
					success: res => {
						let navHeight = menuButtonObject.height + (menuButtonObject.top - res
							.statusBarHeight) * 2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
						this.heightSystemss = navHeight;

						this.windowHeight = res.windowHeight * 2 - 800;
					},
					fail(err) {

					}
				});
			},
			evaluateFn() {
				this.$sun.navGo('/pagesB/index/reviewDetails')
			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		background: #ffffff;
	}

	.bgIndex {
		position: relative;


		.img {
			width: 104rpx;
			height: 104rpx;
			border-radius: 50%;
		}

		.followBtn {
			border-radius: 100rpx;
			width: 100rpx;
			height: 60rpx;
			color: #fff;
			background: linear-gradient(90.00deg, rgb(162, 101, 252), rgb(223, 111, 252) 100%);
		}

		.NowFollowBtn {
			border-radius: 100rpx;
			width: 120rpx;
			height: 60rpx;
			color: rgb(153, 153, 153);
			background: rgb(238, 238, 239);
		}

		.sexImgDiv {
			position: relative;

			.sexImg {


				width: 76rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}

			.sexTitle {
				position: absolute;
				right: 22rpx;
				top: 0;
				z-index: 999;
			}
		}

		.memberVip {
			width: 35rpx;
			height: 35rpx;
			vertical-align: middle;
			margin-right: 8rpx;
			margin-top: 2rpx;
		}

		.evaluationsContent {

			padding: 0rpx 40rpx 20rpx 122rpx;
			border-bottom: 3rpx solid #F4F4F4;

			.evaluationsTitle {
				color: #333;
				margin: 0 0 20rpx;
				font-size: 28rpx;
			}

			.achievementsImg {
				max-height: 840rpx !important;
				width: 300rpx !important;
			}

			.image {
				width: 176rpx;
				height: 176rpx;
				border-radius: 20rpx;
				padding: 4rpx;
			}

			.imgAddress {
				margin-right: 8rpx;

				width: 26.66rpx;
				height: 32rpx;
			}

			.share {
				width: 35rpx;
				height: 35rpx;
				vertical-align: middle;
				margin-right: 5rpx;
			}
		}


	}
</style>